import React from "react"
import Taro from "@tarojs/taro"
import { Sticky } from "@taroify/core"
import GpContainer from "@/components/GpContainer"
import { ScrollView, Image, View } from "@tarojs/components"
import GpColumnArticle from "@/components/GpColumnArticle"
import GpJumpNavs from "@/components/GpJumpNavs"
import GpCurrentPort from "@/components/GpCurrentPort"
import GpTabbar from "@/components/GpTabbar"
import clsx from "clsx"
import { getExamArticleMenu, filterExamArticle } from "@/apis/index"
import { pageMapper, PagePath } from "@/constants/pageMap"
import { navigation } from "@/utils/router"
import styles from "./index.module.scss"

const ports = [{ text: "艺考专题" }]
enum ITabSwitchKey {
  /** 艺考百科 */
  wiki = 0,
  /** 专题文章 */
  article = 1
}
type ITabSwitch = {
  text: string
  value: ITabSwitchKey
  link: PagePath
}
const tabSwitchMap: ITabSwitch[] = [
  { text: "艺考百科", value: ITabSwitchKey.wiki, link: pageMapper.column },
  { text: "专题文章", value: ITabSwitchKey.article, link: pageMapper.columnArticle }
]
// const mockArticleScrolls: IArticleScroll = [
//   { value: 0, text: "推荐" },
//   { value: 1, text: "舞蹈" },
//   { value: 2, text: "音乐" },
//   { value: 3, text: "播音" },
//   { value: 4, text: "空乘" },
//   { value: 5, text: "abc" }
// ]
type IArticleScroll = IOption[]
type IState = {
  curTabSwitch: ITabSwitchKey
  tabSwitches: ITabSwitch[]
  articleScrolls: IArticleScroll
  curArticleScroll: number
  /** 专题文章列表 */
  articleList: any[]
}
/** 专题文章 */
class ColumnArticlePage extends React.Component<unknown, IState> {
  constructor(props) {
    super(props)
    this.state = {
      curTabSwitch: ITabSwitchKey.article,
      tabSwitches: tabSwitchMap,
      articleScrolls: [],
      curArticleScroll: 0,
      articleList: []
    }
  }
  componentDidMount() {
    this.getMenuData()
  }
  getMenuData = () => {
    Taro.showLoading()
    getExamArticleMenu()
      .then(res => {
        if (res.data.success) {
          const retData = res.data.data
          const menu = retData.menus || []
          let curArticleScroll = -9999
          const articleScrolls: IArticleScroll = menu.map(l => {
            if (l.selected) {
              curArticleScroll = l.id
            }
            return {
              value: l.id,
              text: l.name,
              checked: l.selected
            }
          })
          // fallback
          if (curArticleScroll === -9999 && articleScrolls.length > 0) {
            curArticleScroll = articleScrolls[0].value
          }
          this.setState({
            articleScrolls,
            curArticleScroll,
            articleList: retData.items
          })
        }
      })
      .finally(() => {
        Taro.hideLoading()
      })
  }
  /** 快捷导航 */
  renderJumpNavs = () => {
    return (
      <View className="mt-20px">
        <GpJumpNavs />
      </View>
    )
  }
  /** 顶部背景图 */
  renderBanner = () => {
    return (
      <View className="h-200px box-border w-750px relative">
        <Image
          src="https://static.91goodschool.com/UpFiles/public/yikao/image/yikaobg.png"
          className="h-200px w-750px cover-image"
        />
        <View className={clsx("cover-image", styles["banner-bg-mask"])}></View>
        <View className="yehei font-normal text-36px text-hex-fff text-center pt-37px relative z-2">
          艺考知识专题
        </View>
        <View className={clsx(styles["banner-subtitle"], "mt-25px relative z-2")}>
          精选热门艺考百科以及专题文章，为你专业解读
        </View>
        <View className={clsx(styles["banner-subtitle"], "mt-8px relative z-2")}>
          升学经验一网打尽
        </View>
      </View>
    )
  }
  handleTahSwitch = (item: ITabSwitch) => {
    if (this.state.curTabSwitch === item.value) return
    navigation(item.link, null)
  }
  /** tab切换 */
  renderTabSwitch = () => {
    const { tabSwitches, curTabSwitch } = this.state
    const len = tabSwitches.length
    return (
      <View className="flex flex-row justify-center h-90px box-border bg-hex-fff">
        {tabSwitches.map((l, index) => (
          <View
            key={l.value}
            className={clsx(styles["tab-item"], {
              [styles["active"]]: curTabSwitch === l.value,
              "mr-150px": index !== len - 1
            })}
            onClick={() => this.handleTahSwitch(l)}
          >
            {l.text}
          </View>
        ))}
      </View>
    )
  }
  handleArticleScrollChange = (item: IArticleScroll[number]) => {
    const { curArticleScroll } = this.state
    if (curArticleScroll !== item.value) {
      this.getArticleWithKey(item.value)
    }
  }
  getArticleWithKey = (id: number) => {
    Taro.showLoading()
    filterExamArticle(id)
      .then(res => {
        if (res.data.success) {
          this.setState({
            curArticleScroll: id,
            articleList: res.data.data
          })
        }
      })
      .finally(() => {
        Taro.hideLoading()
      })
  }
  /** 专题文章 */
  renderArticle = () => {
    const { articleScrolls, curArticleScroll, articleList } = this.state
    const len = articleList.length
    return (
      <View className="mt-20px">
        <Sticky>
          {/* 滚动锚点 */}
          <View className="h-60px pb-8px bg-hex-fff pt-32px">
            <ScrollView scrollX scrollWithAnimation className="whitespace-nowrap">
              {articleScrolls.map(l => (
                <View
                  key={l.value}
                  className={clsx(styles["article-scroll-item"], {
                    [styles["active"]]: curArticleScroll === l.value
                  })}
                  onClick={() => this.handleArticleScrollChange(l)}
                >
                  {l.text}
                </View>
              ))}
            </ScrollView>
          </View>
        </Sticky>
        {/* 列表区 */}
        <View className="px-30px py-32px flex flex-col bg-hex-fff">
          {articleList.map((l, index) => {
            return (
              <View
                key={l.id}
                className={clsx({
                  "mb-32px": index !== len - 1
                })}
              >
                <GpColumnArticle article={l} />
              </View>
            )
          })}
        </View>
      </View>
    )
  }
  render(): React.ReactNode {
    if (!this.state.articleScrolls || this.state.articleScrolls.length === 0) return null
    return (
      <GpContainer>
        <View>
          {/* 顶部背景图 */}
          {this.renderBanner()}
          {/* tab切换 */}
          {this.renderTabSwitch()}
          {this.renderArticle()}
          {/* 快捷导航 */}
          {this.renderJumpNavs()}
          {/* 当前位置 */}
          <GpCurrentPort ports={ports} />
        </View>
        {/* 底部导航 */}
        <GpTabbar />
      </GpContainer>
    )
  }
}
export default ColumnArticlePage
